import React, {useState, useRef,} from 'react'
import {connect,} from 'react-redux'
import DefaultAvatar from "../../../res/images/web/shared/缺省头像.png";
import DidUpIcon from "../../../res/images/web/topic/up_selected@2x.png";
import UpIcon from "../../../res/images/web/topic/up@2x.png";
import ReportIcon from "../../../res/images/web/topic/jubao.png"
import VipIcon from "../../../res/images/web/my/vip kim@2x.png";
import MoreIcon from "../../../res/images/web/topic/编组 17@2x.png"
import {Modal} from "antd-mobile";

const CommentItem = props => {


    const c = props.comment
    const end = props.end
    const i = props.index
    const level = props.level
    const vip = c.Hfvip
    const isVip = vip > 0
    if (level === 2) {
        // console.log(c)
    }
    const commentsCtnLevelOneCtn = useRef(null)
    const commentsCtnLevelTwoCtn = useRef(null)
    const [p, setP,] = useState(0)
    const [modalShow, setModalShow,] = useState(false)

    const formatDate = (date) => {
        const o = new Date(date * 1000)
        const arr = o.toLocaleDateString().split('/')
        const m = arr[1]
        const d= arr[2]
        // const md = o.toLocaleDateString().split('/').slice(1).join('/')
        const time = o.toTimeString().split(' ')[0].slice(0, 5)
        const result = `${m}月${d}日 ${time}`
        return result
    }

    const getNextPage = (type) => {
        if (!end) {
            setP(p + 1)

            const params = {
                p: p + 1,
                cid: 2,
                commentid: c.Id,
                level,
                huatiid: c.Htid,
            }
            if (props.fetchNextPage) {
                props.fetchNextPage(params)
            } else {
                props.doGetCommentLevel2(params)
            }

        }
    }

    const onTouchEnd = (e) => {
        const ctn = commentsCtnLevelTwoCtn.current
        const last = ctn.lastElementChild
        const rect = last.getBoundingClientRect()
        const cH = document.documentElement.clientHeight
        const bottom = rect.bottom
        if (cH > bottom - 50 && !end) {
            getNextPage(2)
        }
    }

    const avatar = <img style={{marginRight: '8px',}} className='topic-detail-avatar' alt='' src={c.Hfavatar ? c.Hfavatar : DefaultAvatar}/>
    const username = <p style={{color: c.Hfvip > 0 ? '#FA7268' : '#333'}}>{c.Hfname}</p>
    const vipIcon = <img alt='' src={VipIcon} style={{width: '37px', marginRight: '4px',}}/>
    const date = <p className='topic-detail-time'>{formatDate(c.Hftime)}</p>

    // const report = <div
    //     onClick={props.onReport}
    // >
    //     <img alt='' src={ReportIcon} style={{width: 16, height: 16,marginRight: 4}}/>
    // </div>

    const zan = <div className='flex-align-center topic-comment-zan'>
        <img
            alt=''
            src={c.Zan > 0 ? DidUpIcon : UpIcon}
            style={{width: 16, height: 16,}}
            onClick={props.onZan}
        />
        <span>{c.Zannum}</span>
    </div>

    let replayBtn = null
    if (level === 1) {
        replayBtn = <span
            className='topic-comment-reply-btn'
            onClick={() => props.onReply(c, i)}
        >
            回复
        </span>
    }

    const contentTxt = <div className='topic-comment-txt'>
        <p>{c.Hftxt}</p>
    </div>

    let commentsLevelOne = null
    let commentsLevelTwo = null
    let gap = null
    let moreComments = null
    let bottom = null

    if (!end) {
        if (level === 1) {
            moreComments = <div
                className='topic-comment-more'
                onClick={(e) => getNextPage(1)}
            >
                <span>展开更多回复</span>
            </div>
        }
        if (level === 2) {
            bottom = <div style={{textAlign: 'center', marginTop: '24px',}}>
                <span className='gray-text'>下滑加载更多～</span>
            </div>
        }

    } else {
        if (level === 2) {
            bottom = <div style={{textAlign: 'center', marginTop: '24px',}}>
                <span className='gray-text'>全部加载完毕啦～</span>
            </div>
        }
    }


    if (c.comments) {

        let list = []
        let cs = c.comments
        if (cs.data) {
            let ps = Object.keys(cs.data)
            ps.map(p => {list.push(...cs.data[p])})
        }

        if (level === 1) {
            commentsLevelOne = <div className='topic-comment-level-two-ctn' ref={commentsCtnLevelOneCtn}>
                {list.map((c, index) => {
                    const username = <p className='topic-comment-level-two-username'>{c.Hfname}：</p>
                    const content = <p className='topic-comment-level-two-txt'>{c.Hftxt}</p>

                    return <div key={index} className='flex topic-comment-level-two-comment' >
                        {username}
                        {content}
                    </div>
                })}
                {moreComments}
            </div>
        }

        if (level === 2) {
            commentsLevelTwo = <div
                ref={commentsCtnLevelTwoCtn}
                onTouchEnd={e => onTouchEnd(e)}
            >
                {list.map((c, index) => {
                    const avatar = <img style={{marginRight: '8px',}} className='topic-detail-avatar' alt='' src={c.Hfavatar ? c.Hfavatar : DefaultAvatar}/>
                    const username = <p style={{color: c.Hfvip > 0 ? '#FA7268' : '#333'}}>{c.Hfname}</p>
                    const date = <p className='topic-detail-time'>{formatDate(c.Hftime)}</p>
                    const isVip = c.Hfvip > 0
                    const contentTxt = <div className='topic-comment-txt'>
                        <p>{c.Hftxt}</p>
                    </div>

                    return <div
                        key={index}
                        className='topic-comment-level-one-ctn'
                    >
                        <div className='flex-space-between-align-center'>
                            <div className='flex-align-center'>
                                {avatar}
                                <div>
                                    <div className='flex flex-align-center' style={{marginBottom: '4px',}}>
                                        {username}
                                        {isVip ? vipIcon : null}
                                    </div>

                                    {date}
                                </div>
                            </div>
                        </div>
                        {contentTxt}
                    </div>
                })}
            </div>

            if (list.length > 0) {
                gap = <div style={{width: '100%', height: '52px', padding: '24px 16px', boxSizing: 'border-box',}}>
                    <span>全部回复 {c.Comnum}</span>
                </div>
            }
        }
    } else {
        if (level === 2) {
            bottom = <div style={{textAlign: 'center', marginTop: '24px',}}>
                <span className='gray-text'>还没有回帖，快来抢沙发～</span>
            </div>
        }
    }

    const more = <img
        src={MoreIcon}
        style={{width: 16, height: 16,}}
        alt=''
        onClick={() => setModalShow(true)}
    />

    const modal = <Modal
        popup
        animationType="slide-up"
        visible={modalShow}
        onClose={() => setModalShow(false)}
    >

        <div className='topic-comment-modal-ctn'>
            <div
                className='topic-comment-modal-ctn-top'
            >
                <div className='topic-comment-modal-ctn-reply'>
                    <span
                        style={{color: '#FFA500',}}
                        onClick={() => {
                            setModalShow(false)
                            props.onReply(c, i)
                        }}
                    >回复</span>
                </div>

                <div className='topic-comment-modal-ctn-reply'>
                    <span
                        onClick={() => {
                            setModalShow(false)
                            props.onReport()
                        }}
                    >举报</span>
                </div>
            </div>

            <div
                className='topic-comment-modal-ctn-bottom'
            >
                <div
                    className='topic-comment-modal-ctn-cancel'
                    onClick={() => setModalShow(false)}
                >
                    <span>取消</span>
                </div>

            </div>
        </div>

    </Modal>

    return <>
        <div className='topic-comment-level-one-ctn'>
            <div className='flex-space-between-align-center'>
                <div className='flex-align-center'>
                    {avatar}
                    <div>
                        <div className='flex flex-align-center' style={{marginBottom: '4px',}}>
                            {username}
                            {isVip ? vipIcon : null}
                        </div>

                        {date}
                    </div>
                </div>
                <div className='flex-align-center'>
                    {zan}
                    {/*{replayBtn}*/}
                    {level === 1 ? more : null}
                </div>
            </div>
            {contentTxt}
            {commentsLevelOne}
        </div>
        {gap}
        {commentsLevelTwo}
        {bottom}
        {modal}
    </>
}

const mapState = state => ({
    topic: state.topic,
})

const mapDispatch = dispatch => ({
    doGetComment: (payload) => dispatch.topic.doGetComment(payload),
    doGetCommentLevel2: (payload) => dispatch.topic.doGetCommentLevel2(payload),
})

export default connect(mapState, mapDispatch)(CommentItem)
